<script setup lang='ts'>
import myHeaderMete from "@/components/pc/myHeaderMete.vue";
import { Search } from '@element-plus/icons-vue'
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from 'element-plus'
import { getFindData, user, userDataSepmt, userjiequnum, searchData,isVipUser } from "@/api/api";
import mitter from "../utils/mitt";
const quetyData = useRoute()
const router = useRouter()
const input = ref('')
const input2 = ref('')
const data = ref()
const num = ref()
const xData = ref(0)
const yData = ref(10)
const userName = ref()
const isLogin = ref()
const userF = ref()
const mail = ref()
const num2 = ref()
const isColor = ref()
const isData = ref()
const item = ref()
const isVipUserData = ref()
onMounted(async () => {
    mail.value = localStorage.getItem('mail') as string
    mitter.emit('thisId', { key: quetyData.query.id })
    userSepmt()
    userFBSepmt()
    getData()
    userDataNum()
    isP1()
    isVip()
})
//任务大厅数据
const getData = async () => {
    const res = await getFindData()
    data.value = res.data.data.slice(xData.value, yData.value)
    num.value = res.data.data.length
    if (data.value.length !== 0) return isData.value = false
    isData.value = true
}
//任务大厅数据
const userSepmt = async () => {
    const res = await user({ mail: mail.value })
    if (res.data.code !== '200') {
        isLogin.value = false
        return
    }
    isLogin.value = true
    userName.value = res.data.data.name
}
//用户发布订单数量
const userFBSepmt = async () => {
    const userRes = await userDataSepmt({ mail: mail.value })
    userF.value = userRes.data.data
}
//获取用户接单数量
const userDataNum = async () => {
    const res = await userjiequnum({ mail: mail.value })
    num2.value = res.data.data
}
const useRouterThisData = (e: number) => {
    router.push({ name: 'thisData', query: { title: '任务大厅', id: e } })
}
const routerReleases = () => {
    router.push({ name: 'myReleases', query: { id: '1', title: '任务大厅' } })
}
const routerList = () => {
    router.push({ name: 'myList', query: { id: '1', title: '任务大厅' } })
}
const page = ((e: number) => {
    if (e === 1) {
        xData.value = 0
        yData.value = 10
        getData()
        return
    }
    xData.value = e * 10 - 10
    yData.value = e * 10
    getData()
})
//查询价格数据
const search = async () => {
    if (input.value.length < 1 || input2.value.length < 1) {
        ElMessage({
            message: '请填写完整查询数据',
            type: 'error',
        })
    } else {
        data.value = []
        const res = await searchData({ input: input.value, input2: input2.value })
        data.value = res.data.data.slice(xData.value, yData.value)
        num.value = res.data.data.length
        isColor.value = true
        if (data.value.length !== 0) return isData.value = false
        isData.value = true
    }

}
//综合数据按钮
const isP1 = () => {
    input.value = ''
    input2.value = ''
    isColor.value = false
    getData()
}
//检测是否是vip
const isVip = async () => {
  const res = await isVipUser({ id: mail.value })
  if (res.data.code === '200') {
    // 使用 "T" 作为分隔符来分割字符串
    const parts = res.data.data.split("T");
    item.value = parts[0]
    isVipUserData.value = true
    return
  }
  isVipUserData.value = false
}
</script>

<template>
    <div class="color">
        <myHeaderMete title="任务大厅" />
        <div class="Query">
            <p class="textData" @click="isP1" :class="[isColor === false ? 'isColor' : '']">全部</p>
            <p class="textData" :class="[isColor === true ? 'isColor' : '']">价格:</p>
            <div class="inp">
                <el-input v-model="input" type="number" style="width: 100px" placeholder="￥1" />
                -
                <el-input v-model="input2" type="number" style="width: 100px" placeholder="￥100" />
                <el-button @click="search" style="margin-left: 10px;" :icon="Search" />
            </div>
            <p class="textData" style="left: 700px;">当前共有<span style="color: red;">{{ num }}</span>项任务</p>
        </div>
        <div class="content">
            <div class="data">
                <el-empty style="width: 100%;height: 800px;" v-if="isData" description="没数据" />
                <div class="thisData" v-for="i in data" :key="i._id" @click="useRouterThisData(i._id)">
                    <div class="titleAndText">
                        <div style="color: #0b73bb;">{{ i.title }}</div>
                        <p class="text1">{{ i.text }}</p>
                        <div style="color: #999; font-size: 12px;"> 完成周期：服务商报时</div>
                    </div>
                    <div class="moneyAndUser">
                        <div class="money">
                            金额：<span style="color: red;">￥{{ i.money }}</span>
                        </div>
                        <div class="userup">发布人：{{ i.userName }}</div>
                    </div>
                </div>
                <div class="page" v-if="!isData">
                    <el-pagination background @change="page" :page-size="10" layout="prev, pager, next" :total="num" />
                </div>
            </div>
            <div class="user">
                <div class="userData" v-if="isLogin">
                    <div class="userimg">
                        <img src="https://iu.huzhan.com/sign/1475925035869.jpg" alt="">
                    </div>
                    <p class="name" v-if="!isVipUserData">{{ userName }}(普通账户)</p>
                    <p :class="['spanColor','name']" v-if="isVipUserData">{{ userName }}(会员账户)</p>
                    <p v-if="isVipUserData" class="vipP">到期时间：{{ item }}</p>
                    <div class="userlook">
                        <div class="look" @click="routerReleases">
                            <p class="text">我的发布</p>
                            <h1>{{ userF }}</h1>
                        </div>
                        <div class="usersum" @click="routerList">
                            <p class="text">我的接单</p>
                            <h1>{{ num2 }}</h1>
                        </div>
                    </div>
                </div>
                <div class="gg">广告位置</div>
            </div>
        </div>
    </div>

</template>

<style scoped>
@import url(../assets/style/viewsCss/TaskData.css);

.isColor {
    color: #f60;
}
.user{
    margin-top: 10px;
}
.thisColor {
    border: 3px dashed red !important;
}

.pColor {
    color: red;
}

.spanColor {
    color: red;
}
.vipP{
    color: #999;
}
</style>